<template>
  <div>
    <header>
      <van-nav-bar title="上报异常" left-arrow @click-left="onClickLeft" />
    </header>
    <main>
      <div class="form">
        <van-cell title="异常时间" :value="form.time" center />
        <van-cell center title="上报位置" :value="form.location" />
        <van-cell
          center
          title="异常类型"
          :value="form.type"
          style="margin-bottom: 0px"
        />
        <p class="err">异常描述</p>
        <p class="desc">{{ form.desc }}</p>
      </div>
      <div class="upload">
        <p style="margin-bottom: 16px">上传图片 (最多6张)</p>
        <div class="pics">
          <img
            :src="item.url"
            alt=""
            v-for="(item, index) in form.pics"
            :key="index"
            :style="{ marginRight: index % 3 == 2 ? '0' : '10px' }"
          />
        </div>
      </div>
    </main>
  </div>
</template>
<script>
import url1 from "../../assets/1.jpg";
import url2 from "../../assets/2.jpg";
import url3 from "../../assets/3.jpg";
import url4 from "../../assets/4.jpg";

export default {
  name: "ErrShow",
  data() {
    return {
      form: {
        time: "2022.05.04 13:00",
        location: "北京市  北京市  海淀区",
        type: "发动机启动困难",
        desc: "发动机异常，无法着车",
        pics: [
          {
            url: url1,
          },
          {
            url: url2,
          },
          {
            url: url3,
          },
          {
            url: url4,
          },
        ],
      },
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang='less'  scoped>
header {
  padding-top: 43px;
  background-color: #fff;
  width: 100vw;
  height: 93px;
  position: fixed;
  top: 0px;
  left: 0;
  z-index: 999;
  .van-nav-bar {
    width: 100%;
    height: 100%;
    line-height: 50px;
    font-size: 25px;
    color: #2a2929;
    /deep/.van-nav-bar__title {
      font-weight: 700;
    }
  }
}
main {
  padding: 108px 15px 118px 15px;
  width: 100vw;
  background-color: #f4f4f4;
  .form {
    width: 345px;
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
    .van-cell {
      height: 60px;
      padding-left: 0;
      padding-right: 0;
    }
    .err {
      margin-top: 15px;
      margin-bottom: 20px;
      font-size: 14px;
    }
    .desc {
      font-weight: 400;
      font-size: 14px;
      color: #2a2929;
      margin-bottom: 30px;
    }
  }
  .upload {
    margin-top: 15px;
    // margin-bottom: 23px;
    padding: 20px;
    // height: 171px;
    width: 100%;
    border-radius: 10px;
    background-color: #fff;
    .pics {
      display: flex;
      flex-wrap: wrap;

      img {
        width: 92px;
        height: 92px;
        margin-right: 10px;
        margin-bottom: 15px;
      }
    }
  }
}
</style>
